<template>
  <section>
    <div class="model retrieval">
      <img :src="IMGBASE64.JIANSUOGUANLI2X" class="orange">
      <span class="title">检索管理</span>
      <div class="body">
        <span>年级:</span>
        <select class="select" v-model="gradeSelect" @change="getClassData()" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option v-for="(item, key) in gradeOption" :label="item" :value="key"></option>
        </select>
        <span>班级:</span>
        <select class="select" v-model="classSelect" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option v-for="(item, key) in classOption" :label="item" :value="key"></option>
        </select>
        <el-button type="primary" @click="getClassDatas()" size="small">搜索</el-button>
        <el-button type="primary" @click="clearGradeSelect()" size="small">重置</el-button>
        <div class="right">
          <el-autocomplete
            class="inline-input"
            v-model="state2"
            :fetch-suggestions="querySearch"
            :trigger-on-focus="false"
            placeholder="请输入学生姓名"
            size="small">
          </el-autocomplete>
          <el-button type="primary" @click="getStudentData()" size="small">搜索</el-button>
        </div>
      </div>
      <div class="bottom">
        <a :href="`${this._httpUrl}studentInfo/infoManage/exportTemplate?yxt-xtoken=${exportUrl}`">
      	  <el-button type="primary" size="small">下载模板</el-button>
        </a>
      	<a :href="`${this._httpUrl}studentInfo/infoManage/query/export?yxt-xtoken=${exportUrl}`">
          <el-button type="primary" size="small">导出</el-button>
        </a>
        <el-button type="primary" size="small" @click="uploadshow">导入</el-button>
      	<div class="right"><el-button type="success" @click="upshow()" size="small">新建</el-button></div>
      </div>
    </div>
    <div class="model management">
      <img :src="IMGBASE64.XUEJIGUANLI2X" class="pink">
    	<span class="title">学籍管理</span>
    	<div class="kong"></div>
    	<template>
    		<el-table :data="formData" style="width: 100%" stripe @cell-click="showDetails">
    			<el-table-column prop="name" label="姓名" align="center" min-width='120'></el-table-column>
    			<el-table-column prop="grade" label="年级" align="center"></el-table-column>
    			<el-table-column prop="clazz" label="班级" align="center"></el-table-column>
    			<el-table-column prop="studentId" label="学号" align="center"></el-table-column>
    			<el-table-column prop="sex" label="性别" align="center"></el-table-column>
    			<!-- <el-table-column prop="birthday" label="生日" align="center" min-width='140'></el-table-column> -->
    			<el-table-column prop="idNo" label="身份证号" align="center" min-width="120" :show-overflow-tooltip='true'></el-table-column>
    			<el-table-column prop="fatherName" label="爸爸姓名" align="center" min-width='120'></el-table-column>
    			<el-table-column prop="fatherMobile" label="手机号" align="center" :show-overflow-tooltip='true'></el-table-column>
    			<el-table-column prop="motherName" label="妈妈姓名" align="center" min-width='120'></el-table-column>
    			<el-table-column prop="motherMobile" label="手机号" align="center" :show-overflow-tooltip='true'></el-table-column>
    			<el-table-column label="类型" align="center" width='140'>
    				<template scope="props">
					    <el-select v-model="props.row.status" placeholder="请选择">
				        <el-option
				          v-for="item in type"
				          :key="item.value"
				          :label="item.label"
				          :value="item.value">
				        </el-option>
				      </el-select>
    				</template>
    			</el-table-column>
    			<el-table-column label="操作" width="100" align="center">
    				<template scope="scope">
    					<!-- <el-button type="text" size="small">删除</el-button> -->
              <el-button size="small" @click="xiugaiShow(scope)">修改</el-button>
    				</template>
    			</el-table-column>
    		</el-table>
        <el-pagination
          v-show="paging"
          @current-change="handleCurrentChange"
          :page-size="20"
          layout="prev, pager, next, jumper"
          :total="total"
          class="pull-right">
        </el-pagination>
    	</template>
    </div>

    <div class="newUp" v-show="upShow">
      <img :src="IMGBASE64.GREENXINZENG2X" class="img">
      <span class="title">新增学生</span>
      <span class="close">
        <el-button icon="el-icon-close" @click="upshow()"></el-button>
      </span>
      <div class="header">
        <span class="title">基本信息</span>
      </div>
      <el-form ref="form" :model="form" label-width="105px">
        <el-col :span="24">
          <el-form-item label="学生姓名">
            <input type="text" class="text" v-model="form.name"><br>
            <span class="error">请务必准确填写本人的真实姓名，提交后不能更改</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="性别">
            <el-radio-group v-model="form.sex">
              <el-radio label="男">男</el-radio>
              <el-radio label="女">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label="年级">
            <el-select v-model="form.grade" @change="getClassXJData" size="small">
              <el-option v-for="(item, key) in gradeOption" :label="item" :value="key"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="班级">
            <el-select v-model="form.clazz" size="small">
              <el-option v-for="(item, key) in classXJOption" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="学号">
            <input type="text" class="text" v-model="form.studentId">
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label="民族">
            <el-select v-model="form.nation" size="small">
              <el-option v-for="(item, key) in nationOption" :label="item.laber" :value="item.laber"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="生日">
            <el-date-picker
                v-model="form.birthday"
                type="date"
                ref="birthday"
                placeholder="选择日期"
                class="picker"
                size="small"
                @change="changeBirthday">
              </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="身份证号">
            <input type="text" class="text" v-model="form.idNo">
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <div class="header">
            <span class="title">家庭信息</span>
          </div>
        </el-col>
        <el-col :span="13">
          <el-form-item label="爸爸姓名">
            <input type="text" class="text" v-model="form.fatherName">
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="电话">
            <input type="text" class="text" v-model="form.fatherMobile">
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label="妈妈姓名">
            <input type="text" class="text" v-model="form.motherName">
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="电话">
            <input type="text" class="text" v-model="form.motherMobile">
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="现住地址">
            <input type="text" class="longText" v-model="form.placeSSQ">
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label="籍贯">
            <template>
              <v-distpicker @selected="onSelected" hide-area></v-distpicker>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="详细地址">
            <input type="text" class="text" v-model="form.placeDetail">
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label="户籍">
            <el-select v-model="form.place">
              <el-option v-for="(item, key) in huji" :label="item.label" :value="item.label"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="学生户籍">
            <el-select v-model="form.studentPlaceType">
              <el-option v-for="(item, key) in xueshenghuji" :label="item.label" :value="item.label"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label="户口性质">
            <el-select v-model="form.homeNature">
              <el-option v-for="(item, key) in hukouxingzhi" :label="item.label" :value="item.label"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="户籍类别">
            <el-select v-model="form.placeType">
              <el-option v-for="(item, key) in hujileibie" :label="item.label" :value="item.label"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-form>
      <div class="bottom">
        <div class="right">
          <el-button type="success" @click="addStudnetMsg" size="small">确定</el-button>
          <el-button @click="upshow" size="small">取消</el-button>
        </div>
      </div>
    </div>
        <!-- <el-col :span="24">
          <el-form-item label="籍贯">
            <el-select v-model="form.province">
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label="户口性质">
            <el-select v-model="form.place">
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="户口所在地">
            <el-select v-model="form.place">
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label="入学年月">
            <el-select v-model="form.place">
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="入学方式">
            <el-select v-model="form.place">
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label="学生来源">
            <el-select v-model="form.place">
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="就读方式">
            <el-select v-model="form.place">
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="居委">
            <input type="text" class="longText" v-model="form.name"><br>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="现住址">
            <input type="text" class="longText" v-model="form.name"><br>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="通信地址">
            <input type="text" class="longText" v-model="form.name"><br>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="家庭地址">
            <input type="text" class="longText" v-model="form.name"><br>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <div class="bottom">
            <div class="left">
            </div>
            <div class="right">
              <el-button type="success" @click="nextPage">下一页</el-button>
            </div>
          </div>
        </el-col> -->
        <!-- <template v-if="pages === 2">
          <el-col :span="13">
            <el-form-item label="联系电话">
              <input type="text" class="longText" v-model="form.name"><br>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="邮政编码">
              <input type="text" class="longText" v-model="form.name"><br>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="上下车距离">
              <el-select v-model="form.place">
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="上下学方式">
              <el-select v-model="form.place">
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="是否乘坐校车">
              <el-radio class="radio" v-model="form.sex" label="是">是</el-radio>
              <el-radio class="radio" v-model="form.sex" label="否">否</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="随班就读">
              <el-radio class="radio" v-model="form.sex" label="是">是</el-radio>
              <el-radio class="radio" v-model="form.sex" label="否">否</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="入学性质">
              <el-select v-model="form.place">
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="是否独生子女">
              <el-radio class="radio" v-model="form.sex" label="是">是</el-radio>
              <el-radio class="radio" v-model="form.sex" label="否">否</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="是否受过学前教育">
              <el-radio class="radio" v-model="form.sex" label="是">是</el-radio>
              <el-radio class="radio" v-model="form.sex" label="否">否</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="入学前幼儿园">
              <input type="text" class="longText" v-model="form.name"><br>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="是否留守儿童">
              <el-radio class="radio" v-model="form.sex" label="是">是</el-radio>
              <el-radio class="radio" v-model="form.sex" label="否">否</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="是否需要申请支助">
              <el-radio class="radio" v-model="form.sex" label="是">是</el-radio>
              <el-radio class="radio" v-model="form.sex" label="否">否</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="是否享受一补">
              <el-radio class="radio" v-model="form.sex" label="是">是</el-radio>
              <el-radio class="radio" v-model="form.sex" label="否">否</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="是否孤儿">
              <el-radio class="radio" v-model="form.sex" label="是">是</el-radio>
              <el-radio class="radio" v-model="form.sex" label="否">否</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="是否烈士或优抚子女">
              <el-radio class="radio" v-model="form.sex" label="是">是</el-radio>
              <el-radio class="radio" v-model="form.sex" label="否">否</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="是否由政府购买学位">
              <el-radio class="radio" v-model="form.sex" label="是">是</el-radio>
              <el-radio class="radio" v-model="form.sex" label="否">否</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否进城务工人员随迁子女">
              <el-radio class="radio" v-model="form.sex" label="是">是</el-radio>
              <el-radio class="radio" v-model="form.sex" label="否">否</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="残疾类型">
              <el-select v-model="form.place">
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="血型">
              <el-select v-model="form.place">
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="电子邮箱">
              <input type="text" class="text" v-model="form.name">
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="主页地址">
              <input type="text" class="text" v-model="form.name">
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="特长">
              <el-input
                type="textarea"
                :rows="4"
                placeholder="请详细描述孩子的特长"
                v-model="form.name">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <div class="bottom">
              <div class="left">
                <el-button type="success" @click="lastPage">上一页</el-button>
              </div>
              <div class="right">
                <el-button type="success" @click="nextPage">下一页</el-button>
              </div>
            </div>
          </el-col>
        </template>
        <template v-if="pages === 3">
          <el-col :span="24">
            <el-form-item label="爸爸姓名">
              <input type="text" class="text" v-model="form.name">
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="爸爸关系">
              <el-select v-model="form.place">
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="爸爸关系说明">
              <el-select v-model="form.place">
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="身份证件类型">
              <el-select v-model="form.place">
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="身份证件号">
              <input type="text" class="text" v-model="form.name">
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="联系电话">
              <input type="text" class="text" v-model="form.name">
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="民族">
              <el-select v-model="form.place">
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否监护人">
              <el-radio class="radio" v-model="form.sex" label="是">是</el-radio>
              <el-radio class="radio" v-model="form.sex" label="否">否</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="工作单位">
              <input type="text" class="text" v-model="form.name">
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="职位">
              <input type="text" class="text" v-model="form.name">
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="户口性质">
              <el-select v-model="form.place">
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="户口所在地">
              <el-select v-model="form.place">
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="爸爸现住址">
              <input type="text" class="longText" v-model="form.name">
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="妈妈姓名">
              <input type="text" class="text" v-model="form.name">
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="妈妈关系">
              <el-select v-model="form.place">
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="妈妈关系说明">
              <el-select v-model="form.place">
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="身份证件类型">
              <el-select v-model="form.place">
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="身份证件号">
              <input type="text" class="text" v-model="form.name">
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="联系电话">
              <input type="text" class="text" v-model="form.name">
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="民族">
              <el-select v-model="form.place">
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否监护人">
              <el-radio class="radio" v-model="form.sex" label="是">是</el-radio>
              <el-radio class="radio" v-model="form.sex" label="否">否</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="工作单位">
              <input type="text" class="text" v-model="form.name">
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="职位">
              <input type="text" class="text" v-model="form.name">
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="户口性质">
              <el-select v-model="form.place">
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="户口所在地">
              <el-select v-model="form.place">
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="妈妈现住址">
              <input type="text" class="longText" v-model="form.name">
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <div class="bottom">
              <div class="left">
                <el-button type="success" @click="lastPage">上一页</el-button>
              </div>
              <div class="right">
                <el-button type="success" @click="addStudnetMsg">确定</el-button>
                <el-button @click="upshow">取消</el-button>
              </div>
            </div>
          </el-col>
        </template> -->

    <div class="details" v-show="isDetails">
      <img :src="IMGBASE64.XIANGQING2X" class="icon">
      <span class="title">详情</span>
      <span class="close">
        <el-button icon="el-icon-close" @click="detailsShow()"></el-button>
      </span>
      <div class="body">
        <el-form label-width="90px">
          <el-col :span="12">
            <el-form-item label="姓名">
              <span>{{detailsForm.name}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别">
              <span>{{detailsForm.sex}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年级">
              <span>{{detailsForm.grade}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="班级">
              <span>{{detailsForm.class}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学号">
              <span>{{detailsForm.studentId}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="生日">
              <span>{{detailsForm.birthday}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="身份证号">
              <span>{{detailsForm.idNo}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="爸爸姓名">
              <span>{{detailsForm.fatherName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号">
              <span>{{detailsForm.fatherMobile}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="妈妈姓名">
              <span>{{detailsForm.motherName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号">
              <span>{{detailsForm.motherMobile}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="现住地址">
              <span>{{detailsForm.placeSSQ}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="籍贯">
              <span>{{detailsForm.nativePlace}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="详细地址">
              <span>{{detailsForm.placeDetail}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="户籍">
              <span>{{detailsForm.place}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="学生户籍">
              <span>{{detailsForm.studentPlaceType}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="户口性质">
              <span>{{detailsForm.homeNature}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="户籍类别">
              <span>{{detailsForm.placeType}}</span>
            </el-form-item>
          </el-col>
        </el-form>
      </div>
    </div>

    <div class="details" v-show="xiugai">
      <img :src="IMGBASE64.XIANGQING2X" class="icon">
      <span class="title">修改</span>
      <span class="close">
        <el-button icon="el-icon-close" @click="closeXiugai()"></el-button>
      </span>
      <div class="body">
        <el-form label-width="90px">
          <el-col :span="24">
            <el-form-item label="姓名">
              <input type="text" class="text" v-model="xiugaiForm.name">
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年级">
              <el-select v-model="xiugaiForm.gradeSelect" @change="getClassXGData" size="small">
                <el-option v-for="(item, key) in gradeOption" :label="item" :value="key"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="班级">
              <el-select v-model="xiugaiForm.classSelect" size="small">
                <el-option v-for="item in classXGOption" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学号">
              <input type="text" class="text" v-model="xiugaiForm.studentId">
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别">
              <el-radio class="radio" v-model="xiugaiForm.sex" label="男">男</el-radio>
              <el-radio class="radio" v-model="xiugaiForm.sex" label="女">女</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="生日">
              <el-date-picker
                v-model="xiugaiForm.birthday"
                type="date"
                size="small"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="身份证号">
              <input type="text" class="text" v-model="xiugaiForm.idNo">
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="爸爸姓名">
              <input type="text" class="text" v-model="xiugaiForm.fatherName">
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号">
              <input type="text" class="text" v-model="xiugaiForm.fatherMobile">
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="妈妈姓名">
              <input type="text" class="text" v-model="xiugaiForm.motherName">
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号">
            <input type="text" class="text" v-model="xiugaiForm.motherMobile">
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <div class="bottom">
              <el-button type="danger" size="small" @click="keepData">确认修改</el-button>
            </div>
          </el-col>
        </el-form>
      </div>
    </div>

    <div class="upload" v-show="upload">
      <span class="close">
        <el-button icon="el-icon-close" @click="uploadshow()"></el-button>
      </span>
      <div class="uploadButton">
        <el-upload
          class="upload-demo"
          ref="upload"
          name="files"
          :action="`${this._httpUrl}studentInfo/infoManage/import`"
          :headers= "this.xtoken"
          :auto-upload="false"
          :on-success="resData">
          <el-button slot="trigger" type="primary" :disabled="selectFile" size="small">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
        </el-upload>
      </div>
      <div class="err">
        <span>{{errWord}}</span>
      </div>
    </div>

    <transition name="modal-shadow">
      <div class="modal-backdrop" v-show="isSuccess"></div>
    </transition>

    <div class="loading" v-show="isOnload">
      <i class="el-icon-loading"></i>
      <span>正在加载学生检索数据...</span>
    </div>

  </section>
</template>

<script>
import VDistpicker from 'v-distpicker'

export default {
  components: { VDistpicker },
  data () {
    return {
      select: {
        province: null,
        city: null
      },
      pages: 1,
      exportUrl: null,
      errWord: null,
      xtoken: null,
      upload: false,
      isOnload: true,
      selectValue: null,
      options: [],
      formData: [],
      dutiesSelect: null,
      dutiesOption: [],
      gradeSelect: null,
      gradeOption: [],
      subjectSelect: null,
      subjectOption: [],
      classSelect: null,
      classOption: [],
      classXGOption: [],
      classXJOption: [],
      selectFile: false,
      total: 0,
      page: 1,
      paging: true,
      allNameData: [],
      restaurants: [],
      state2: null,
      isDetails: false,
      xiugai: false,
      hukouxingzhi: [{
        label: '农业'
      },
      {
        label: '非农业'
      }],
      xueshenghuji: [{
        label: '无户籍'
      },
      {
        label: '广东省农村户籍'
      },
      {
        label: '广东省城镇户籍'
      },
      {
        label: '非广东省农村户籍'
      },
      {
        label: '非广东省城镇户籍'
      }],
      hujileibie: [{
        label: '本市户籍'
      },
      {
        label: '本省户籍'
      },
      {
        label: '外省户籍'
      },
      {
        label: '港澳台'
      },
      {
        label: '外国'
      },
      {
        label: '无户籍'
      }],
      huji: [{
        label: '政策性借读生'
      },
      {
        label: '非政策性借读生'
      }],
      type: [
        {
          value: '1',
          label: '在读'
        },
        {
          value: '2',
          label: '休学'
        },
        {
          value: '3',
          label: '退学'
        }],
      checked: false,
      upShow: false,
      isSuccess: false,
      nationOption: [
        {laber: '汉族'},
        {laber: '壮族'},
        {laber: '藏族'},
        {laber: '裕固族'},
        {laber: '彝族'},
        {laber: '瑶族'},
        {laber: '锡伯族'},
        {laber: '乌孜别克族'},
        {laber: '维吾尔族'},
        {laber: '佤族'},
        {laber: '土家族'},
        {laber: '土族'},
        {laber: '塔塔尔族'},
        {laber: '塔吉克族'},
        {laber: '水族'},
        {laber: '畲族'},
        {laber: '撒拉族'},
        {laber: '羌族'},
        {laber: '普米族'},
        {laber: '怒族'},
        {laber: '纳西族'},
        {laber: '仫佬族'},
        {laber: '苗族'},
        {laber: '蒙古族'},
        {laber: '门巴族'},
        {laber: '毛南族'},
        {laber: '满族'},
        {laber: '珞巴族'},
        {laber: '僳僳族'},
        {laber: '黎族'},
        {laber: '拉祜族'},
        {laber: '柯尔克孜族'},
        {laber: '景颇族'},
        {laber: '京族'},
        {laber: '基诺族'},
        {laber: '回族'},
        {laber: '赫哲族'},
        {laber: '哈萨克族'},
        {laber: '哈尼族'},
        {laber: '仡佬族'},
        {laber: '高山族'},
        {laber: '鄂温克族'},
        {laber: '俄罗斯族'},
        {laber: '鄂伦春族'},
        {laber: '独龙族'},
        {laber: '东乡族'},
        {laber: '侗族'},
        {laber: '德昂族'},
        {laber: '傣族'},
        {laber: '达斡尔族'},
        {laber: '朝鲜族'},
        {laber: '布依族'},
        {laber: '布朗族'},
        {laber: '保安族'},
        {laber: '白族'},
        {laber: '阿昌族'}],
      form: {
        name: null,
        sex: null,
        birthday: null,
        studentId: null,
        id: null,
        idNo: null,
        grade: null,
        clazz: null,
        nation: null,
        fatherName: null,
        fatherMobile: null,
        motherName: null,
        motherMobile: null,
        placeSSQ: null,
        placeDetail: null,
        place: null,
        studentPlaceType: null,
        homeNature: null,
        placeType: null,
        nativePlace: null
      },
      detailsForm: {
        name: null,
        grade: null,
        class: null,
        stuId: null,
        sex: null,
        birthday: null,
        Id: null,
        faName: null,
        faPhone: null,
        moName: null,
        moPhone: null
      },
      xiugaiForm: {
        id: null,
        name: null,
        sex: null,
        gradeSelect: null,
        classSelect: null,
        studentId: null,
        birthday: null,
        idNo: null,
        fatherName: null,
        fatherMobile: null,
        motherName: null,
        motherMobile: null
      }
    }
  },
  mounted () {
    this.getDutiesData()
    this.getGradeData()
    this.getSubjectData()
    this.getStudentNameData()
    this.exportUrl = this._exportUrl()
  },
  methods: {
    _exportUrl () {
      let _cookie = document.cookie.split(';')
      let _cookieArray = []
      _cookie.forEach(v => {
        let _d = v.split('=')
        _cookieArray.push({
          key: _d[0],
          value: _d[1]
        })
      })
      return _cookieArray[0].value
    },
    lastPage () {
      if (this.pages > 1) {
        this.pages = this.pages - 1
      } else {
        this.pages = 1
      }
    },
    nextPage () {
      if (this.pages < 3) {
        this.pages = this.pages + 1
      } else {
        this.pages = 3
      }
    },
    upshow () {
      this.upShow = !this.upShow
      this.isSuccess = !this.isSuccess
      this.form.name = null
      this.form.idNo = null
      this.form.grade = null
      this.form.clazz = null
      this.form.birthday = null
      this.form.sex = null
      this.form.nation = null
      this.form.fatherName = null
      this.form.fatherMobile = null
      this.form.motherName = null
      this.form.motherMobile = null
      this.form.placeSSQ = null
      this.form.placeDetail = null
      this.form.place = null
      this.form.studentPlaceType = null
      this.form.homeNature = null
      this.form.placeType = null
      this.form.nativePlace = null
    },
    handleCurrentChange (val) {
      this.page = val
      this.getStudentNameData()
    },
    querySearch (queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter (queryString) {
      return (restaurant) => {
        return (restaurant.value.indexOf(queryString.toLowerCase()) === 0)
      }
    },
    getStudentNameData () {
      this.isOnload = true
      this.$http.post(this._httpUrl + 'studentInfo/infoManage/query', {page: (this.page), rows: 20}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.data.code === '000') {
          this.options = response.data.data.rows
          this.formData = response.data.data.rows
          this.total = response.data.data.total
          this.getAllData()
          for (var i = 0; i < this.options.length; i++) {
            this.$set(this.options[i], 'status', null)
            if (isNaN(parseInt(this.options[i].fatherMobile, 11)) === true) {
              this.options[i].fatherMobile = this.options[i].fatherMobile + '(无效的电话号码)'
            }
            if (isNaN(parseInt(this.options[i].motherMobile, 11)) === true) {
              this.options[i].motherMobile = '无效的电话号码'
            }
            this.options[i].numValue = i + 1
            for (var j in this.gradeOption) {
              if (this.options[i].grade === parseInt(j)) {
                this.options[i].grade = this.gradeOption[j]
              }
            }
          }
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getAllData () {
      this.$http.post(this._httpUrl + 'studentInfo/infoManage/query', {page: (this.page), rows: this.total}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.data.code === '000') {
          this.allNameData = response.data.data.rows
          this.restaurants = this.allNameData
          this.isOnload = false
          for (var i = 0; i < this.allNameData.length; i++) {
            this.restaurants[i].value = this.allNameData[i].name
          }
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getClassDatas () {
      if (this.gradeSelect !== null && this.classSelect !== null) {
        this.formData = []
        this.paging = false
        var z = 0
        for (var j = 0; j < this.allNameData.length; j++) {
          if (this.allNameData[j].grade === parseInt(this.gradeSelect) && this.allNameData[j].clazz === parseInt(this.classSelect + 1)) {
            for (var x in this.gradeOption) {
              if (this.allNameData[j].grade === parseInt(x)) {
                this.allNameData[j].grade = this.gradeOption[x]
              }
            }
            this.formData.push(this.allNameData[j])
            this.formData[z].numValue = ++z
          }
        }
        this.restaurants = this.formData
      }
      if (this.gradeSelect === null && this.classSelect === null) {
        this.getStudentNameData()
        this.paging = true
      }
    },
    getDutiesData () {
      this.$http.post(this._httpUrl + 'organizedepart/query', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.data.code === '000') {
          for (var i in response.data.data) {
            if (response.data.data[i].ID >= 1000) {
              this.dutiesOption.push(response.data.data[i])
            }
          }
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getSubjectData () {
      this.$http.post(this._httpUrl + 'public/subject/query', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.data.code === '000') {
          this.subjectOption = response.data.data
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getStudentData () {
      if (this.state2 !== null) {
        for (var i = 0; i < this.restaurants.length; i++) {
          if (this.state2 === this.restaurants[i].name) {
            this.restaurants[i].numValue = 1
            for (var x in this.gradeOption) {
              if (this.restaurants[i].grade === parseInt(x)) {
                this.restaurants[i].grade = this.gradeOption[x]
              }
            }
            this.formData = []
            this.formData.push(this.restaurants[i])
            this.paging = false
          }
        }
      }
      if (this.state2 === null) {
        this.getStudentNameData()
        this.paging = true
      }
    },
    getGradeData () {
      this.$http.post(this._httpUrl + 'public/grade/query', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.data.code === '000') {
          this.gradeOption = response.data.data.gradeMap
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getClassData () {
      this.$http.post(this._httpUrl + 'public/class/query?grade=' + this.gradeSelect, {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.data.code === '000') {
          this.classOption = response.data.data
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getClassXGData () {
      this.$http.post(this._httpUrl + 'public/class/query?grade=' + this.xiugaiForm.gradeSelect, {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.data.code === '000') {
          this.classXGOption = response.data.data
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    clearGradeSelect () {
      this.gradeSelect = null
      this.classSelect = null
      this.classOption = []
    },
    showDetails (rows, column) {
      if (column.label !== '操作' && column.label !== '类型') {
        // this.detailsForm.name = rows.name
        // this.detailsForm.grade = rows.grade
        // this.detailsForm.class = rows.clazz
        // this.detailsForm.stuId = rows.studentId
        // this.detailsForm.sex = rows.sex
        // this.detailsForm.birthday = rows.birthday
        // this.detailsForm.Id = rows.idNo
        // this.detailsForm.faName = rows.fatherName
        // this.detailsForm.faPhone = rows.fatherMobile
        // this.detailsForm.moName = rows.motherName
        // this.detailsForm.moPhone = rows.motherMobile
        console.log(rows)
        this.detailsForm.name = rows.name
        this.detailsForm.idNo = rows.idNo
        this.detailsForm.grade = rows.grade
        this.detailsForm.class = rows.clazz
        this.detailsForm.studentId = rows.studentId
        this.detailsForm.birthday = rows.birthday
        this.detailsForm.sex = rows.sex
        this.detailsForm.nation = rows.nation
        this.detailsForm.fatherName = rows.fatherName
        this.detailsForm.fatherMobile = rows.fatherMobile
        this.detailsForm.motherName = rows.motherName
        this.detailsForm.motherMobile = rows.motherMobile
        this.detailsForm.placeSSQ = rows.homeAddr
        this.detailsForm.placeDetail = rows.placeDetail
        this.detailsForm.place = rows.place
        this.detailsForm.studentPlaceType = rows.studentPlaceType
        this.detailsForm.homeNature = rows.homeNature
        this.detailsForm.placeType = rows.placeType
        this.detailsForm.nativePlace = rows.nativePlace
        this.isDetails = !this.isDetails
        this.isSuccess = !this.isSuccess
      }
    },
    detailsShow () {
      this.isDetails = false
      this.isSuccess = !this.isSuccess
    },
    onSelected (data) {
      this.form.nativePlace = data.province.value + data.city.value
      console.log(this.form.nativePlace)
    },
    getClassXJData () {
      this.$http.post(this._httpUrl + 'public/class/query?grade=' + this.form.grade, {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.data.code === '000') {
          this.classXJOption = response.data.data
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    changeBirthday () {
      this.form.birthday = this.$refs.birthday.displayValue
    },
    addStudnetMsg () {
      this.$http.post(this._httpUrl + 'studentInfo/infoManage/add', {studentId: this.form.studentId, name: this.form.name, grade: this.form.grade, clazz: this.form.clazz, idNo: this.form.idNo, birthday: this.form.birthday, sex: this.form.sex, nation: this.form.nation, fatherName: this.form.fatherName, fatherMobile: this.form.fatherMobile, motherName: this.form.motherName, motherMobile: this.form.motherMobile, placeSSQ: this.form.placeSSQ, placeDetail: this.form.placeDetail, place: this.form.place, studentPlaceType: this.form.studentPlaceType, homeNature: this.form.homeNature, placeType: this.form.placeType, nativePlace: this.form.nativePlace}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.data.code === '000') {
          this.getStudentNameData()
          if (this.checked === true) {
            this.form.name = null
            this.form.idNo = null
            this.form.grade = null
            this.form.clazz = null
            this.form.birthday = null
            this.form.sex = null
            this.form.nation = null
            this.form.fatherName = null
            this.form.fatherMobile = null
            this.form.motherName = null
            this.form.motherMobile = null
            this.form.placeSSQ = null
            this.form.placeDetail = null
            this.form.place = null
            this.form.studentPlaceType = null
            this.form.homeNature = null
            this.form.placeType = null
            this.form.nativePlace = null
            this.checked = false
          } else {
            this.form.name = null
            this.form.idNo = null
            this.form.grade = null
            this.form.clazz = null
            this.form.birthday = null
            this.form.sex = null
            this.form.nation = null
            this.form.fatherName = null
            this.form.fatherMobile = null
            this.form.motherName = null
            this.form.motherMobile = null
            this.form.placeSSQ = null
            this.form.placeDetail = null
            this.form.place = null
            this.form.studentPlaceType = null
            this.form.homeNature = null
            this.form.placeType = null
            this.form.nativePlace = null
            this.upShow = !this.upShow
            this.isSuccess = !this.isSuccess
          }
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    uploadshow () {
      this.upload = !this.upload
      this.isSuccess = !this.isSuccess
    },
    submitUpload () {
      this.$refs.upload.submit()
      // console.log(this.$refs.upload.uploadFiles[0].response)
    },
    resData (response, file, fileList) {
      console.log(response)
      this.errWord = response.msg
    },
    xiugaiShow (scope) {
      for (var i in this.gradeOption) {
        if (scope.row.grade === this.gradeOption[i]) {
          this.xiugaiForm.gradeSelect = i
        }
      }
      this.xiugai = !this.xiugai
      this.isSuccess = !this.isSuccess
      this.xiugaiForm.name = scope.row.name
      this.xiugaiForm.sex = scope.row.sex
      this.xiugaiForm.classSelect = scope.row.clazz
      this.xiugaiForm.studentId = scope.row.studentId
      this.xiugaiForm.birthday = scope.row.birthday
      this.xiugaiForm.idNo = scope.row.idNo
      this.xiugaiForm.fatherName = scope.row.fatherName
      this.xiugaiForm.fatherMobile = scope.row.fatherMobile
      this.xiugaiForm.motherName = scope.row.motherName
      this.xiugaiForm.motherMobile = scope.row.motherMobile
      this.xiugaiForm.id = scope.row.id
    },
    closeXiugai () {
      this.xiugai = !this.xiugai
      this.isSuccess = !this.isSuccess
    },
    keepData () {
      if (this.xiugaiForm.fatherMobile.length !== 11 || isNaN(this.xiugaiForm.fatherMobile) === true) {
        alert('父亲手机号码输入不规范!')
      } else if (this.xiugaiForm.motherMobile.length !== 11 || isNaN(this.xiugaiForm.motherMobile) === true) {
        alert('母亲手机号码输入不规范!')
      } else {
        this.$http.post(this._httpUrl + 'studentInfo/infoManage/update', {id: this.xiugaiForm.id, name: this.xiugaiForm.name, grade: this.xiugaiForm.gradeSelect, clazz: this.xiugaiForm.classSelect, idNo: this.xiugaiForm.idNo, studentId: this.xiugaiForm.studentId, sex: this.xiugaiForm.sex, birthday: this.xiugaiForm.birthday, fatherName: this.xiugaiForm.fatherName, fatherMobile: this.xiugaiForm.fatherMobile, motherName: this.xiugaiForm.motherName, motherMobile: this.xiugaiForm.motherMobile}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
          if (response.data.code === '000') {
            this.getStudentNameData()
            this.xiugai = !this.xiugai
            this.isSuccess = !this.isSuccess
          } else if (response.body.code === '887') {
            this.$router.push('/')
          } else if (response.body.code === '889') {
            this.$router.push('/')
          }
        })
      }
    }
  }
}
</script>

<style type="text/css" scoped>
  .el-picker-panel{
    z-index: 999999 !important;
  }
</style>
<style lang="less" scoped>
@import '/static/css/all-use.css';
  .el-col-12{
    height: 62px;
  }
  // .el-col-13{
  //   height: 62px;
  // }
  .retrieval{
    .body{
      span{
      	margin-left: 4%;
      }
      span:first-child{
      	margin-left: 0;
      }
      .select{
        width: 10%;
        border: 0;
        border-bottom: 1px solid #D7D7D7;
      }
      .right{
        width: 35%;
        float: right;
        text-align: right;
        margin-right: 3%;
				&-text{
					width: 58%;
					border: 0;
					border-bottom: 1px solid #D7D7D7;
				}
				.search{
					background: #00A0E8;
					border: 0;
					border-radius: 2px;
					color: #fff;
					padding: 5px 15px;
				}
      }
    }
    .bottom{
    	.right{
				float: right;
				margin-right: 3%;
			}
			&-text{
				padding: 10px 10px;
				border: 0;
				border-bottom: 1px solid #D7D7D7;
			}
    }
  }
  
  .error{
    color: #FB7862;
  }
  .close{
    position: absolute;
    right: 2%;
  }
  .modal-backdrop{
    background: #000;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    opacity: .5;
  }
  .newUp{
    width: 65%;
    height: 1000px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -40%;
    background: #fff;
    background: #FFF;
    margin-top: 50px;
    border-radius: 5px;
    padding: 20px 20px 0 20px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
    z-index: 99999;
    .select{
      width: 20%;
      border: 0;
      border-bottom: 1px solid #D7D7D7;
    }
    .img{
      position: absolute;
      left: 24px;
      top: -25px;
    }
    .title{
      margin-left: 96px;
    }
    .header{
      height: 24px;
      border-bottom: 2px solid #D7D7D7;
      padding: 30px 0 10px 0;
      margin-left: 3%;
      margin-bottom: 10px;
      .title{
        height: 24px;
        display: inline-block;
        color: #FB7862;
        border-bottom: 2px solid #FB7862;
        padding: 0 0 10px 0;
        margin-left: 0;
      }
    }
    .longText{
      width: 50%;
      border: 0;
      border-bottom: 1px solid #d7d7d7;
    }
    .text{
      width: 217px;
      border: 0;
      border-bottom: 1px solid #d7d7d7;
    }
    .bottom{
      width: 100%;
      border-top: 1px solid #D7D7D7;
      margin-top: 20px;
      background: #F8F8F8;
      padding: 8px 0;
      margin-left: -20px;
      margin-right: -20px;
      border-radius: 0 0 5px 5px;
      position: absolute;
      bottom: 0;
      text-align: right;
      .left{
        width: 50%;
        display: inline-block;
        margin-left: 2%;
      }
      .right{
        width: 43%;
        display: inline-block;
        text-align: right;
        margin-right: 20px;
      }
    }
  }

  .loading{
    position: fixed;
    top: 50%;
    left: 50%;
    .el-icon-loading{
    }
  }

  .picker{
    position: absolute;
    left: 0;
    top: 0;
  }
  .upload{
    width: 20%;
    position: fixed;
    left: 50%;
    top: 200px;
    margin-left: -10%;
    background: #FFF;
    border-radius: 5px;
    z-index: 99999;
    padding: 10px 10px 10px 10px;
    text-align: center;
    .uploadButton{
      margin-top: 40px;
    }
  }
  .details{
    position: fixed;
    top: 40px;
    .body{
      height: 435px;
      overflow: scroll;
    }
    .body::-webkit-scrollbar {
      display: none;
    }
    .text{
      width: 217px;
      border: 0;
      border-bottom: 1px solid #d7d7d7;
    }
    .bottom{
      text-align: center;
    }
  }
</style>
